<template>
    <el-form-item label="显示格式">
        <el-select
            v-model="optionModel.format"
            placeholder=""
            >
            <el-option
                v-for="item in state.options"
                :key="item"
                :label="item"
                :value="item"
            />
        </el-select>
    </el-form-item>
</template>

<script setup>
import { computed, onMounted, reactive, watchEffect } from 'vue';

defineOptions({
    name:"format-editor"
})

const props = defineProps({
    optionModel:{
        type:Object,
        default:()=>({})
    },
    selectWidget:{
        type:Object,
        default:()=>({})    
    },
    designer:{
        type:Object,
        default:()=>({})    
    },
})

const state = reactive({
    options:[]
})

const type  = computed(()=>props.selectWidget.type)


const initOptions = ()=>{
    switch(type.value){
        case 'time':
        case 'time-range':
            state.options = [
                    "HH:mm:ss",
                    "HH时mm分ss秒"
            ]
            break
        case 'date':
        case 'date-range':
            state.options = [
                'YYYY-MM-DD',
                'YYYY/MM/DD',
                'YYYY年MM月DD日',
                'YYYY-MM-DD HH:mm:ss',
                'YYYY-MM-DD hh:mm:ss'
            ]
            break
    }
}
watchEffect(()=>{
    type.value
    initOptions()
})

</script>

<style lang='scss' scoped></style>